<template>
	<div style='height:100%;' ref='container'>
		<v-chart v-if='value' style='height: 100%;width: 100%;' :options='options'></v-chart>
		<loading v-else></loading>
	</div>
</template>

<script>
	export default {
		name : 'device-pie-chart',

		props : {
			value : {
				type : [Array, Object],
				default : function() {
					return []
				}
			}
		},
		
		data() {
			return {
				show : false
			}
		},
		
		computed : {
			options () {
				var W = this.$refs.container.clientWidth * 0.4 / 2
				var minAngle = 60
				var minRate = 60 / 360
				var data = this.value
				
				var sum = 0
				data.forEach(v => {
					sum += v.value
				})

				var incrValue = 0
				var minValue = sum * minRate
				
				data.forEach(v => {
					v.v = v.value
					if(v.value < minValue) {
						incrValue += (minValue - v.value)
						v.value = minValue
					}
				})

				if(incrValue >= 1) {
					while(true) {
						for(let i = 0; i < data.length; i ++) {
							var item = data[i]
							if(item.value >= (minValue + 1)) {
								item.value --
								incrValue --
							}
						}
						if(incrValue < 1) {
							break
						}
					}
				}
				
				sum = 0
				data.forEach(v => {
					sum += v.value
				})

				var startAngle = 360
				var series = []

				var offset = 3 / 360 * sum
				var colorList = ['#0f5ddf', '#6d76da', '#269ae2', '#3948a9']
				
				
				data.forEach((item, index) => {
					var v = item.value
					var serie = {
						type : 'pie',
						startAngle : startAngle,
						silent : true,
						center : ['50%', '50%'],
						radius : index % 2 == 0 ? [W - 15, W] : [W - 10, W - 5],
						labelLine: {
							normal: {
								show: true,
								length: 20,
								length2: 30
							}
						},
						label : {
							show : true,
							align : 'center',
							formatter (params) {
								return `${params.data.name}\n{margin|}\n{hr|}\n{margin|}\n${params.data.v}`
							}
						},
						data   : [
							{name : item.name, value : v - offset, v : item.v, label : {color : '#fff', rich : {margin : {height : 4, width : '100%'},hr : {height : 1, width : '100%', backgroundColor : colorList[index]}}}, itemStyle : {color : colorList[index]}},
							{name : item.name, value : sum - v, v : v, itemStyle : {color : 'transparent'}}
						]
					}
					series.push(serie)
					startAngle -= (v / sum * 360)
				})
				
				var options =  {
					grid : {
						top : '0px',
						right : '0px',
						bottom : '0px',
						left : '0px'
					},

					series: series
				}

				return options
			}
		},

		mounted () {
			this.show = true
		}
	}
</script>